<template>
  <div class="main">
    <Header :showCarBtn="true">
      <BackHome />
      <div class="divider"></div>
      <a-select
        v-model:value="area.id"
        size="small"
        style="width: 13.125rem"
        :options="area.data"
        @change="onAreaChange">
      <template #suffixIcon>
        <svg t="1659511408750" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2332" width="12" height="12"><path d="M511.999488 819.413462 72.8374 204.586538 951.1626 204.586538Z" p-id="2333" fill="#ffffffd9"></path></svg>
      </template>
      </a-select>
    </Header>
    <Map ref="refMap" 
      :area-id="area.id"
      :center="mapConfig.center" 
      :start-time="mapConfig.startTime" 
      :end-time="mapConfig.endTime"/>
    <TimeRangeQueryTool @time-query="onQueryTimeChange" ref="refTimeRange" class="time" />
    <div class="left">
      <Box class="info" :show-header="false">
        <info :data="infoData"></info>
      </Box>
      <Box class="road" title="路口态势监控 ">
        <CustomTable :columns="crossing.header" :table-data="crossing.data"></CustomTable>
      </Box>
      <Box class="line" title="干线态势监控">
        <CustomTable :columns="trunk.header" :table-data="trunk.data"></CustomTable>
      </Box>
    </div>
    <Box class="middle" :show-header="false">
      <AreaInfo :data="areaInfo"></AreaInfo>
    </Box>
    <div class="right">
      <Box title="交通流量检测">
        <LineChart :x-axis="traffic.xAxis" :data="traffic.data" :color-array="traffic.colorArray"></LineChart>
      </Box>
      <Box title="交通事故/违规监测">
        <BarChart :data="trafficEvent.data" :color-array="trafficEvent.colorArray"/>
      </Box>
      <Box title="异常告警">
        <span class="warn_total">当前告警：<span style="color:#3EC92E;">{{warningInfo.total +'条'}}</span></span>
        <ListInfo :data="warningInfo.data"></ListInfo>
      </Box>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick } from 'vue';
import { useStore } from 'vuex';
import Header from './header/Header.vue';
import Box from '@/components/Box.vue';
import LineChart from '@/components/LineChart.vue';
import BarChart from '@/components/BarChart.vue';
import Info from './body/Info.vue';
import Map from './body/Map.vue';
import AreaInfo from './body/AreaInfo.vue';
import CustomTable from '@/components/Table.vue';
import ListInfo from './body/ListInfo.vue';
import TimeRangeQueryTool from './body/TimeRangeQueryTool.vue';
import { useRoute } from 'vue-router';
import { overview, junctionIndex, roadIndex, trafficVolume, trafficAccident, warning, areaList } from '@/api/area/index.js';
import BackHome from './body/BackHome.vue';
import moment from 'moment';
const store = useStore(); 
const route = useRoute(); // 路由配置
// 示范区信息
const area = reactive({
  id: route.query.id?parseInt(route.query.id):1, // 当前示范区id
  data: [] // 示范区集合
});
const today = moment().endOf('day').valueOf();
const refTimeRange = ref();
const mapConfig = reactive({
  center: undefined,
  startTime: today - 2*24*60*60*1000 + 1,
  endTime: today - 24*60*60*1000
});

const refMap = ref(null);
// 示范区概览信息
const infoData = ref([
  {
    name: '区域云',
    value: 12
  },
  {
    name: '边缘云',
    value: 90
  },
  {
    name: '路侧感知系统',
    value: 16
  },
  {
    name: '设备',
    value: 112
  }
]);
// 路口态势监控
const crossing = reactive({
  header: [
    {
      title: '路口',
      dataIndex: 'crossingName'
    },
    {
      title: '交通指数',
      dataIndex: 'congestion'
    },
    {
      title: '排队最大长度',
      dataIndex: 'maxQueueNum'
    },
    {
      title: '交通流量',
      dataIndex: 'flow'
    }
  ],
  data: []
});
// 干线态势监控
const trunk = reactive({
  header: [
    {
      title: '干线',
      dataIndex: 'trunkName'
    },
    {
      title: '拥堵指数',
      dataIndex: 'congestion'
    },
    {
      title: '平均通行速度',
      dataIndex: 'avaSpeed'
    },
    {
      title: '平均通行时间',
      dataIndex: 'avaTime'
    }
  ],
  data: []
});

const areaInfo = ref([
  {
    name: '普通十字路口',
    value: 19,
    color: '#3fe0ad',
    isCircle: true
  },
  {
    name: '全息十字路口',
    value: 12,
    color: '#fbcbff',
    isCircle: true
  },
  {
    name: 'T型路口',
    value: 16,
    color: '#3fe0ad',
    isCircle: true
  },
  {
    name: '重点路段',
    value: 128,
    color: '#4E8CDC',
    isCircle: true
  },
  {
    name: '不可通行区域',
    value: 3,
    color: 'rgba(255, 1, 1, 0.25)',
    isCircle: false
  },
  {
    name: '潜在危险区域',
    value: 1,
    color: 'rgba(246, 188, 63, 0.25)',
    isCircle: false
  }
]);

// 交通流量监测
const traffic = reactive({
  xAxis: [],
  data: [],
  colorArray: undefined
});
// 交通事故
const trafficEvent = reactive({
  data: [],
  colorArray: undefined
});
// 异常告警
const warningInfo = reactive({
  data: [],
  total: 0
});
/** 概览 */
const getOverview = () => {
  overview({areaId:area.id}).then(({ retCode, data }) => {
    if (retCode === '0000_0') {
      infoData.value[0].value = data.region;
      infoData.value[1].value = data.edge;
      infoData.value[2].value = data.roadside;
      infoData.value[3].value = data.device;
    }
  });
};

/** 路口态势 */
const getJunctionIndex = (data) => {
  junctionIndex(data).then(({ retCode, data }) => {
    if (retCode === '0000_0') {
      crossing.data = data;
    }
  });
};

/** 路口态势 */
const getRoadIndex = (data) => {
  roadIndex(data).then(({ retCode, data }) => {
    if (retCode === '0000_0') {
      trunk.data = data;
    }
  });
};

/** 交通流量 */
const getTrafficVolume = (data) => {
  trafficVolume(data).then(({ retCode, data }) => {
    if (retCode === '0000_0') {
      traffic.xAxis = data.map(({ timePoint, value }) => timePoint);
      traffic.data = data.map(({ timePoint, value }) => value);
    }
  });
};

/** 交通事故 */
const getTrafficAccident = (data) => {
  trafficAccident(data).then(({ retCode, data }) => {
    if (retCode === '0000_0') {
      trafficEvent.data = data.map(({ accidentType, value }) => {
        return { name: accidentType, value };
      });
    }
  });
};

/** 异常告警 */
const getWarning = (data) => {
  warning(data).then(({ retCode, data }) => {
    if (retCode === '0000_0') {
      warningInfo.data = data.alarm.map(({ detail }) => detail);
      warningInfo.total = data.total;
    }
  });
};

/** 请求页面数据 */
function getPageData () {
  const date = moment(mapConfig.endTime).format('YYYY-MM-DD');
  const data = {date, areaCode: area.id}
  getOverview(data);
  getJunctionIndex(data);
  getRoadIndex(data);
  getTrafficVolume(data);
  getTrafficAccident(data);
  getWarning(data);
}

/**时间查询 */
const onQueryTimeChange = ({startTime, endTime}) =>{
  mapConfig.startTime = moment(startTime, 'YYYY-MM-DD HH:mm:ss').valueOf();
  mapConfig.endTime = moment(endTime, 'YYYY-MM-DD HH:mm:ss').valueOf();
  getPageData()
  refMap.value.onQueryTimeChange();
}
/** 请求示范区列表 */
async function getAreaList () {
  let _areaList = store.getters['map/areaList'];
  if (_areaList.length > 0) {
    area.data = _areaList.map(({ id, name, viewpoint, serviceList }) => { return { label: name, value: id, viewpoint, serviceList }; });
  } else {
    const { resCode, data } = await areaList();
    if (resCode === '00000') {
      area.data = data.map(({ id, name, viewpoint, serviceList }) => { return { label: name, value: id, viewpoint, serviceList }; });
      store.commit('map/cacheAreaList', data);
    }
  }
  window.location.hash = '#/Area?id=' + area.id;
  let [crrentArea] = area.data.filter(({ value }) => value === area.id);
  mapConfig.center = JSON.parse(crrentArea.viewpoint);
  nextTick(() => {
    getPageData();
    addWfsLayer();
  });
}
function onAreaChange () {
  window.location.hash = '#/Area?id=' + area.id;
  getPageData();
  addWfsLayer();
}

const addWfsLayer = () => {
  const index = area.data.findIndex(
    (item) => item.value === area.id
  );
  if (index !== -1) {
    const areaInfo = area.data[index];
    const viewPointStr = areaInfo.viewpoint;
    if (viewPointStr) {
      mapConfig.center = JSON.parse(viewPointStr);
    }
    const wfsServices = areaInfo.serviceList.filter(item => item.type === 'wfs');
    refMap.value.addWfsLayer(areaInfo.value, wfsServices);
  }
};
getAreaList();
</script>

<style lang="less" scoped>
.left,
.middle,
.right {
  position: absolute;
  bottom: 1.25rem;
}
.left,
.right {
  width: 26%;
  height: calc(100% - var(--headerHeight) - var(--vMargin));
  display: flex;
  flex-direction: column;
  align-content: space-around;
  gap: var(--vMargin);
}
.left {
  left: 1.5rem;
}
.right {
  right: 1.5rem;
}
.right > div {
  width: 100%;
  height: calc((100% - var(--vMargin) - var(--vMargin)) / 3);
}
.middle {
  width: 26%;
  left: calc(26% + 2.75rem);
  height: 16%;
}
.info {
  height: calc((100% - var(--vMargin) - var(--vMargin)) * 0.12);
}
.road,
.line {
  height: calc((100% - var(--vMargin) - var(--vMargin)) * 0.44);
}
/deep/ .ant-select-selector {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(9, 28, 46, 0.8) !important;
  border: solid 1px rgba(9, 28, 46, 1) !important;
  text-align: left;
}
/deep/ .ant-select-arrow {
  color: white !important;
}
.divider {
  width: 1px;
  height: 1.375rem;
  border-left: 1px solid #49a9d2;
  margin: 0 1rem;
}

.time {
  position: absolute;
  top: calc(var(--headerHeight) + var(--vMargin));
  left: calc(26% + var(--hMargin) + var(--hMargin));
}

.warn_total {
  position: absolute;
  right: 0.625rem;
  top: -2rem;
  font-size: 0.875rem;
}
</style>
